<template>
	<div class="myInput" v-show="!item.common.isHidden" :style="commonStyle">
		<m-input
			v-model="item.common.val"
			:type="item.style.type"
			:clearable="item.style.clearable"
			:input-align="item.style.inputAlign"
			:placeholder="item.style.placeholder"
			:disabled="item.style.disabled"
			:maxlength="item.style.maxlength"
			:fixed="item.style.fixed"
			:password-icon="item.style.passwordIcon"
			:border="item.style.border"
			:border-color="item.style.borderColor"
			:height="item.common.height"
			:borderRadius="item.style.borderRadius"
			@confirm="inputConfirm"
		/>
	</div>
</template>

<script>
	import calcBaseStyle from '../libs/calcBaseStyle'
	export default {
		name: 'myInput',
		props:{
			pageConfig: {
				type: Object,
				default(){
					return {}
				}
			},
			pcid: null
		},
		data(){
			return {
				item: {common: {},style: {},children:[]},
			}
		},
		created() {
			this.$parent.widgetList.some(widget=>{
				if(widget.cid === this.pcid){
					this.item = widget
					return true
				}
			})
		},
		computed:{
			commonStyle(){
				return calcBaseStyle(this.item,this.pageConfig.contentH)
			},
		},
		methods:{
			inputConfirm(){
				uni.$emit('eventCallback-' + this.pageConfig.cid, this.item.common.confirmEv)
			}
		}
	}
</script>

<style lang="less" scoped>
	.myInput {
		position: absolute;
		// overflow: hidden;
	}
</style>
